/* eslint-disable react-native/no-inline-styles */
import React, {useCallback, useRef, useState} from 'react';

import {
  SafeAreaView,
  View,
  StyleSheet,
  Text
} from 'react-native';

import {Tester} from '@rnoh/testerino';
import {
  GestureHandlerRootView,
  gestureHandlerRootHOC,
} from 'react-native-gesture-handler';
import { TestCase, TestSuite } from '@rnoh/testerino';

import {
  TapGestureHandler,
} from 'react-native-gesture-handler';

import { PALETTE } from './src/constants';

type RootViewMode = 'Component' | 'HOC';

const DEV_MODE = false;

function App({}): JSX.Element | null {
  const [rootViewMode, setRootViewMode] = useState<RootViewMode>('Component');

  return (
    <View style={{flex: 1}}>
      <SafeAreaView style={{backgroundColor: '#222', flex: 1}}>
          <GestureHandlerRootView style={{flex: 1}}>
            <Tests />
          </GestureHandlerRootView>
      </SafeAreaView>
    </View>
  );
}

function Tests() {

  return (
    <>
      <Tester style={{flex: 1}}>
        <TestSuite name="maxDeltaY">
          <TestCase itShould="maxDeltaY,tap - change color on tap as long as finger didn't move more than 100px vertical (maxDeltaY)">
            <StateKeeper<string>
              renderContent={(backgroundColor, setBackgroundColor) => {
                return (
                  <TapGestureHandler
                    maxDeltaY={100}
                    onActivated={() =>
                      setBackgroundColor(prev =>
                        prev === PALETTE.DARK_BLUE
                          ? PALETTE.LIGHT_GREEN
                          : PALETTE.DARK_BLUE,
                      )
                    }>
                    <View
                      style={{
                        backgroundColor: backgroundColor ?? PALETTE.DARK_BLUE,
                        width: '100%',
                        height: 300,
                        alignItems: 'center',
                        justifyContent: 'center',
                      }}>
                      <View
                        style={{
                          width: 100,
                          height: 300,
                          borderLeftWidth: 1,
                          borderRightWidth: 1,
                          borderColor: 'white',
                          justifyContent: 'center',
                        }}>
                        <Text
                          style={[
                            styles.rectLabel,
                            {
                              padding: 8,
                            },
                          ]}>
                          TO FAIL: TOUCH, MOVE FINGER MORE THAN 100 PX, RELEASE
                          FINGER
                        </Text>
                      </View>
                    </View>
                  </TapGestureHandler>
                );
              }}
            />
          </TestCase>
        </TestSuite>
      </Tester>
    </>
  );
}

function StateKeeper<T>(props: {
  renderContent: (
    value: T | undefined,
    setValue: React.Dispatch<React.SetStateAction<T | undefined>>,
  ) => void;
}) {
  const [value, setValue] = useState<T>();

  return <>{props.renderContent(value, setValue)}</>;
}

const styles = StyleSheet.create({
  testCaseContainer: {
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'black',
  },
  rectLabel: {
    fontSize: 12,
    color: 'white',
    textAlign: 'center',
  },
});

export default App;